<template>
    <div class="jul-col" :class="[`jul-col-${col}`]">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'JulCol',
    inject: {
        JulRow: {
            default: ''
        }
    },
    props: {
        col: null
    }
}
</script>

<style lang="scss">
    [class*=jul-col-] {
        float: left;
        box-sizing: border-box;
    }
    .jul-col-12 {
        width: 100%;
    }
    .jul-col-6 {
        width: 50%;
    }
    .jul-col-4 {
        width: 33.3333%;
    }
    .jul-col-3 {
        width: 25%;
    }
    .jul-col-2 {
        width: 16.6666%;
    }
</style>
